<template>
  <div class="login">
    <div class="login-logo">
      <img src="@/assets/logoHead.png" alt="">
    </div>
    <div class="login-main">
      <h4 class="login-main-title">
        <div class="login-main-title-normal">
          <span :class="login ? 'active' : ''" @click="tab('login')">登录</span>
          <span>·</span>
          <span :class="register ? 'active' : ''" @click="tab('register')">注册</span>
        </div>
      </h4>
      <login-in v-if="login" />
      <register-in v-if="!login" />
    </div>
  </div>
</template>

<script>
import loginIn from './components/login.vue'
import registerIn from './components/register.vue'
export default {
  components: {
    loginIn: loginIn,
    registerIn: registerIn
  },
  data() {
    return {
      login: true,
      register: false
    }
  },
  mounted() {
    this.tab(this.$route.params.type)
  },
  methods: {
    tab(e) {
      console.log(e)
      if (e === 'register') {
        this.register = true
        this.login = false
      } else {
        this.register = false
        this.login = true
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .login
    padding-top: 35px
    height: 100%
    min-height: 750px
    text-align: center
    background-color: #f1f1f1
    // logo
    .login-logo
      position: absolute
      top: 25px
      cursor: pointer
      margin-left: 10px
      & img
        width: 180px
    // 登录主体区域
    .login-main
      width: 400px
      margin: 60px auto 0
      padding: 30px 50px 30px
      vertical-align: middle
      background-color: #fff
      display: inline-block
      box-shadow: 0 0 8px rgba(0,0,0,0.1)
      .login-main-title
        font-weight: 400
        color: #969696
        padding: 10px
        .login-main-title-normal
          font-size: 18px
          & span
            padding: 10px 13px
            font-weight: bold
            cursor: pointer
            user-select: none
          .active
            color: #ea6f5a
            border-bottom: 2px solid #ea6f5a
</style>
